@import '../global/variables.css';

.icon {
  display: inline-block;

  fill: currentColor;
}

.glyph {
  display: inline-flex;

  pointer-events: none;

  /* TODO remove in 8.0 */
  &[width='10'] {
    vertical-align: -1px;
  }

  &[width='12'] {
    vertical-align: -1px;
  }

  &[width='16'] {
    vertical-align: -3px;
  }

  &[width='20'] {
    vertical-align: -2px;
  }

  &.compatibilityMode {
    width: calc(var(--ring-unit) * 2);
    height: calc(var(--ring-unit) * 2);
    margin-right: 0;
    margin-left: 0;
  }
}

/* HACK: This media query hack makes styles applied for WebKit browsers only */
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .glyph {
    width: auto; /* Safari size bug workaround, see https://youtrack.jetbrains.com/issue/RG-1983 */
  }
}

.gray {
  color: var(--ring-secondary-color);
}

.hover {
  color: var(--ring-link-hover-color);
}

.green {
  color: var(--ring-success-color);
}

.magenta {
  color: var(--ring-link-hover-color);
}

.red {
  color: var(--ring-error-color);
}

.blue {
  color: var(--ring-main-color);
}

.white {
  color: var(--ring-white-text-color);
}

.loading {
  animation-name: icon-loading;
  animation-duration: 1200ms;
  animation-iteration-count: infinite;
}

@keyframes icon-loading {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);

    opacity: 0.5;
  }

  100% {
    transform: scale(1);
  }
}
